<template>
  <div>
    <el-dialog title="设备操作" :visible.sync="dialogVisible" width="650px">
      <!-- body -->
      <div class="msg">
        <!-- left -->
        <div class="left">
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
        </div>
        <!-- middle -->
        <div class="middle">
          <span class="middle">
            (温馨提示：<span style="color:green">绿色</span
            >字体为设备在线，<span style="color:red">红色</span
            >字体为设备离线)</span
          >
        </div>
        <!-- right -->
        <div class="right">
          <!-- <el-button @click="appendto" size="mini">额外添加设备</el-button> -->
        </div>
      </div>
      <!-- search -->
      <!-- <div class="search">
        <el-input
          placeholder="请输入内容"
          v-model="input3"
          class="input-with-select"
        >
          <el-button slot="prepend" >
            设备号
          </el-button>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div> -->
      <!-- table -->
      <div class="handle-dev" v-if="bol">
        <div class="content">
          <el-checkbox-group
            v-model="checkedDev"
            @change="handleCheckedDevChange"
          >
            <el-checkbox
              :label="item.fNumber"
              v-for="item in checkList"
              :key="item.fNumber"
              class="checkbox-item"
            >
              <span :style="{ color: item.fIsOnline ? 'green' : 'red' }">{{
                item.fNumber
              }}</span></el-checkbox
            >
            <!-- fIsOnline -->
          </el-checkbox-group>
        </div>
      </div>
      <div class="handle-bottom">
        <el-button
          value="19"
          border
          type="primary"
          plain
          @click.native="getVal($event)"
        >
          <i class="iconfont">&#xe624;</i> 开屏</el-button
        >
        <el-button
          value="18"
          border
          type="primary"
          plain
          @click.native="getVal($event)"
          ><i class="iconfont">&#xe605;</i> 关屏</el-button
        >
        <el-button
          value="46"
          border
          type="primary"
          plain
          @click.native="getVal($event)"
          ><i class="iconfont">&#xe680;</i> 清空所有节目</el-button
        >
        <el-button
          value="67"
          border
          type="primary"
          plain
          @click.native="getVal($event)"
          ><i class="el-icon-refresh-right"></i> 屏复位</el-button
        >
        <el-button
          value="20"
          border
          type="primary"
          plain
          @click.native="getVal($event)"
          ><i class="iconfont">&#xe6c6;</i> 平台校时</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cardSend } from '@/api/equipment/list' // import request api
export default {
  name: 'handleDialog',
  props: {
    ids: {
      type: Array,
      default: () => {
        return []
      }
    },
    handles: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      bol: true,
      dialogVisible: false, // 是否开启对话框
      checkList: [], // 接收父组件传值
      checkNumber: [],
      checkAll: true, // 默认全选
      checkedDev: [], // 选中的设备
      input3: '', // 搜索文本
      select: '', // 下拉框的值
      queryForm: {
        command: undefined
      },
      // 操作
      options: [
        {
          value: 18,
          label: '关屏'
        },
        {
          value: 19,
          label: '开屏'
        },
        {
          value: 46,
          label: '清空所有节目'
        },
        {
          value: 67,
          label: '屏复位'
        },
        {
          value: 20,
          label: '平台校时'
        }
      ],
      rules: {
        command: [
          { required: true, message: '请选择设备操作', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    async handleLink (event_value) {
      if (this.checkedDev.length) {
        const res = await cardSend({
          command: event_value,
          cardList: this.checkedDev
        })
        // console.log(res)
        if (res.code === 200) {
          // this.dialogVisible = false // 关闭dialog
          this.$message.success(res.msg)
        } else {
          this.$message.error('错误,请联系管理员')
        }
      } else {
        return this.$message({
          showClose: true,
          message: '请选择设备号操作',
          type: 'warning',
          center: true
        })
      }
    },
    getVal (e) {
      switch (e.currentTarget.value) {
        case '19':
          this.handleLink(e.currentTarget.value)
          break
        case '18':
          this.handleLink(e.currentTarget.value)
          break
        case '46':
          this.handleLink(e.currentTarget.value)
          break
        case '67':
          this.handleLink(e.currentTarget.value)
          break
        case '20':
          this.handleLink(e.currentTarget.value)
          break
        default:
          break
      }
    },
    handleCheckAllChange (val) {
      //val BoolType
      this.checkedDev = val ? this.checkNumber : []
      // console.log(this.checkedDev)
    },
    handleCheckedDevChange (value) {
      // console.log(value)
      this.checkAll = value.length === this.checkNumber.length
    },
    // 附加设备
    appendto () {
      this.checkList.push({ fNumber: Math.random() })
    }
  },
  mounted () {},
  updated () {},
  watch: {
    dialogVisible (newVal) {
      if (newVal) {
        // console.log(this.checkList.length)
        // console.log(this.handles.length)
        // 父组件更改了设备数量
        if (this.checkList.length !== this.handles.length) {
          console.log('第一次')
          this.$nextTick(() => {
            this.checkList = this.handles.map(item => item)
            this.checkNumber = this.handles.map(item => item.fNumber)
            this.checkedDev = this.checkNumber
            // console.log(this.handles)
            // console.log(this.checkList)
            // console.log(this.checkedDev)
            this.checkAll = this.checkedDev.length === this.checkNumber.length
            this.bol = true
          })
        } else if (!this.checkedDev.length) {
          console.log('不是第一次,但是没有选中任何设备')
        } else {
          console.log('不是第一次')
        }
      } else {
        // this.checkList = []
        this.resetForm('queryForm')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.msg {
  padding: 0px 5.5px;
  display: flex;
  justify-content: space-between;
  // .left {
  // }
  // .middle {
  // }
  // .right {
  // }
}
.search {
  width: 605px;
  padding: 5px;
}

.handle-dev {
  padding: 5px;
  max-height: 350px;
  overflow: auto;
  margin-bottom: 10px;
}
.handle-bottom {
  text-align: center;
}
::v-deep div.el-dialog__body {
  padding: 10px;
}
::v-deep span.el-checkbox__input {
  padding-left: 5px;
}
::v-deep .checkbox-item {
  width: 150px;
  margin-right: 0px;
  border: 1px solid #000;
  margin-right: -1px;
  margin-bottom: -1px;
}
</style>
